<template>
  <div class='wrapper'>
    <div class="title">热门歌手</div>
      <mu-list v-for="(item, index) in singerList">
        <router-link :to="{name: 'singerDetail', params: { id: item.sId}}">
          <mu-list-item :title="item.sName" :describeText="item.sIntroduce.substring(0,5)">
            <mu-avatar :src="'http://hongtaofans.cn/music/resources/pic/singer/' + item.sPicture" slot="leftAvatar"/>
            <mu-icon value="add" slot="right"/>
          </mu-list-item>
          <mu-divider />
        </router-link>
      </mu-list>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        singerList: []
      }
    },
    created () {
      this.$http.get('http://hongtaofans.cn/music/singer/getallsinger')
      .then((res) => {
        if (res.data.status === 1) {
          this.singerList = res.data.result
        }
      })
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/theme.less";
  .wrapper {
    width: 100%;
    overflow: auto;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
  }
  
  .title {
    margin: .3rem 0 .3rem 0;
    padding-left: .2rem;
    text-align: left;
    border-left: .15rem solid @primaryColor;
  }
</style>
